<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分享设置</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/set_share.css">
    <style type="text/css">
        .layui-form-label {
            width: 100px;
        }

        .layui-upload-list {
            margin-left: 20px;
            margin-top: 10px;
        }

        #demoText {
            margin-top: 5px;
        }

        #demoText2 {
            margin-top: 5px;
        }

        #uniocn {
            box-sizing: border-box;
            padding: 15px 100px;
        }
    </style>
</head>

<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
        <button class="layui-btn layui-btn-ms">分享设置</button>
    </div>

    <div class="finance-modular">
        <form action="##" class="layui-form">
            <p style="box-sizing: border-box;padding: 10px;background: #F8F8F8;">系统设置</p>
            <div style="box-sizing: border-box;padding: 10px ;background: #fff">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px;">分享标题</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input name="title" type="text" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">分享图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" style="width: 120px;" id="demo1">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px;">分享描述</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input name="desc" type="text" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px;">引导关注</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="radio" name="set" value="开启" title="开启">
                        <input type="radio" name="set" value="关闭" title="关闭" checked>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px;">关注链接</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input name="link" type="text" required lay-verify="required" autocomplete="off"
                               class="layui-input" placeholder="用户未关注的引导页面，建议使用短链接">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">关注二维码</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test2">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" style="width: 120px;" id="demo2">
                                <p id="demoText2"></p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">强制关注</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="focus[focus1]" lay-skin="primary" title="抢购活动" checked="">
                        <input type="checkbox" name="focus[focus2]" lay-skin="primary" title="超级券">
                        <input type="checkbox" name="focus[focus3]" lay-skin="primary" title="拼团商城">
                        <input type="checkbox" name="focus[focus4]" lay-skin="primary" title="团购活动">
                    </div>
                    <p class="ptips">用户购买下单时，可以强制用户关注公众号以后购买商品</p>
                </div>

            </div>
            <button class="layui-btn" lay-submit="submit" lay-filter="formDemo" style="margin: 10px 10px 0px 0px">提交
            </button>
        </form>
    </div>

</div>

<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="./js/public.js"></script>
<script src="js/data.js"></script>
<script>
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
        }
    })

    layui.use(['form', 'upload'], function () {
        var form = layui.form,
            upload = layui.upload;
        //分享图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },

            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },

            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        })

        //二维码图片上传
        var uploadInst2 = upload.render({
            elem: '#test2',
            url: '',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            },

            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },

            error: function () {
                //演示失败状态，并实现重传
                var demoText2 = $('#demoText2');
                demoText2.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText2.find('.demo-reload').on('click', function () {
                    uploadInst2.upload();
                });
            }
        })

        //监听提交
        form.on('submit(formDemo)', function (data) {
            console.log(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>

</html>